<template>
  <MainLayout>
    <div class="server-detail-container">
      <!-- 服务器基本信息卡片 -->
      <el-card class="server-info-card">
        <div class="server-header">
          <div class="server-title">
            <el-icon :size="24"><Monitor /></el-icon>
            <h1>{{ server.name }}</h1>
          </div>
          <div class="server-actions">
            <el-button :type="server.status === '运行中' ? 'warning' : 'success'" size="default">
              <el-icon>{{ server.status === '运行中' ? Minus : CaretRight }}</el-icon>
              {{ server.status === '运行中' ? '停止' : '启动' }}
            </el-button>
            <el-button type="primary" size="default" class="ml-2">
              <el-icon><Refresh /></el-icon> 重启
            </el-button>
            <el-button type="default" size="default" class="ml-2">
              <el-icon><Download /></el-icon> 备份
            </el-button>
          </div>
        </div>

        <div class="server-metrics">
          <el-row :gutter="20">
            <el-col :span="4">
              <div class="metric-item">
                <div class="metric-label">状态</div>
                <div class="metric-value"><el-tag :type="statusType">{{ server.status }}</el-tag></div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="metric-item">
                <div class="metric-label">IP地址</div>
                <div class="metric-value">{{ server.ip }}</div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="metric-item">
                <div class="metric-label">端口</div>
                <div class="metric-value">{{ server.port }}</div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="metric-item">
                <div class="metric-label">在线玩家</div>
                <div class="metric-value">{{ server.players }}/{{ server.maxPlayers }}</div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="metric-item">
                <div class="metric-label">运行时间</div>
                <div class="metric-value">{{ server.uptime }}</div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="metric-item">
                <div class="metric-label">最后更新</div>
                <div class="metric-value">{{ server.lastUpdated }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <!-- 标签页内容 -->
      <el-tabs v-model="activeTab" class="server-tabs">
        <el-tab-pane label="配置" name="config">
          <ServerConfig :server-id="server.id" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </MainLayout>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRoute } from 'vue-router';
import MainLayout from '@/components/layout/MainLayout.vue';
import { Monitor, CaretRight, Minus, Refresh, Download } from '@element-plus/icons-vue';

// 定义服务器详情类型
interface ServerDetail {
  id: number;
  name: string;
  ip: string;
  port: number;
  status: '运行中' | '已停止' | '维护中';
  players: number;
  maxPlayers: number;
  uptime: string;
  lastUpdated: string;
  description?: string;
}

// 获取路由参数
const route = useRoute();
const serverId = Number(route.params.id);

// 模拟服务器详情数据
const server = ref<ServerDetail>({
  id: serverId,
  name: `服务器 #${serverId}`,
  ip: '192.168.1.101',
  port: 8211,
  status: '运行中',
  players: 12,
  maxPlayers: 20,
  uptime: '2天8小时',
  lastUpdated: '2025-07-26 10:30:00',
  description: '这是一个幻兽帕鲁游戏服务器，运行稳定，适合多人联机游玩。'
});

// 标签页状态
const activeTab = ref('config');

// 根据状态获取标签类型
const statusType = computed(() => {
  switch (server.value.status) {
    case '运行中': return 'success';
    case '已停止': return 'danger';
    case '维护中': return 'warning';
    default: return 'default';
  }
});
</script>

<style scoped>
.server-detail-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.server-info-card {
  flex-shrink: 0;
}

.server-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.server-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.server-actions {
  display: flex;
  gap: 10px;
}

.server-metrics {
  padding: 10px 0;
}

.metric-item {
  text-align: center;
  padding: 10px;
  background-color: #f8fafc;
  border-radius: 6px;
}

.metric-label {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 5px;
}

.metric-value {
  font-size: 16px;
  font-weight: 500;
}

.server-tabs {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.el-tabs__content {
  flex: 1;
  overflow: auto;
  padding-top: 15px;
  }
</style>